import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "../style/index.less"

interface stateType {
    count: number
}

class Index extends React.Component {
    readonly state: stateType = {
        count: 0
    }

    buttonRef = React.createRef<HTMLButtonElement>();

    componentDidMount() {
        const button = this.buttonRef.current
        setTimeout( () => this.setState( { count: 1 } ), 500 )
        setTimeout( () =>  button && button.click(), 500 )
    }

    handleButtonClick = () => {
        this.setState((prevState:stateType)  => ({ count: prevState.count + 2 }) )
    }

    render() {
        return (
            <React.Fragment>
                <div>typescript</div>
                <div>
                <button ref={this.buttonRef} onClick={this.handleButtonClick}>增加2</button>
                <div>
                    {
                        Array.from(new Array(8000)).map( (v,index) =>
                            <div key={index}>{this.state.count}</div>
                        )
                    }
                </div>
                </div>
            </React.Fragment>
        )
    }
}

ReactDOM.render(<Index />, document.querySelector("#main"))
